<template>
    <el-container>
        <el-header class="searchBox" height="100px" style="padding: 8px">
            <el-form :inline="true" >
                <el-row>
                    <el-form-item label="执业机构:" >
                        <el-input placeholder="执业机构" v-model="searchList1.OrganizationName" ></el-input>
                    </el-form-item>
                    <el-form-item label="签约日期：">
                        <el-col :span="8">
                            <el-date-picker type="date" v-model="searchList1.SignTime" placeholder="开始日期"  style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="终止日期" v-model="searchList1.OverTime"  style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="签约状态:">
                        <el-select v-model="searchList1.Status" >
                            <el-option label="正常" value="1" ></el-option>
                            <el-option label="禁用" value="2" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="协议名称:">
                        <el-input placeholder="协议名称" v-model="searchList1.TemplateName">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="护士姓名:">
                        <el-input placeholder="护士姓名" v-model="searchList1.Name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="护士工号:" >
                        <el-input placeholder="护士工号" v-model="searchList1.JobNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getProtocol">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-header>
        <el-main>
            <el-table border :data="list" >
                <el-table-column label="序号" prop="Id"></el-table-column>
                <el-table-column label="姓名" prop="Name"></el-table-column>
                <el-table-column label="身份证号" prop="IdCardNo"></el-table-column>
                <el-table-column label="执业机构" prop="OrganizationName"></el-table-column>
                <el-table-column label="协议名称" prop="TemplateName"></el-table-column>
                <el-table-column label="签约协议号" prop="TemplateId"></el-table-column>
                <el-table-column label="签约时间" prop="SignTime"></el-table-column>
                <el-table-column label="协议状态" prop="Status"></el-table-column>
                <el-table-column label="备注" prop="Remark"></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button type="text" size="mini" @click="handleView(scope.$index, scope.row)">详情查询</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog :visible.sync="viewVisible"  top="10px" width="50%">
                <el-form style="position: relative;top: -15px" ref="form" :modal="searchList" label-position="left" >
                    <el-row style="margin-bottom: 20px">
                        <el-col :span="7" :gutter="10">
                    <span>
                        协议模板名称:&nbsp&nbsp{{searchList.TemplateName}}
                    </span>
                        </el-col>
                        <el-col :span="5">
                  <span>
                    类型：{{searchList.UserType}}
                  </span>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 35px auto 35px">
                        <el-col >
                            <quill-editor  v-model="searchList.Discription" @focus="focus($event)" :options="editorOption"></quill-editor>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" >
                        <el-col :span="6" >
                            <el-form-item label-width="60px" label="签约人:">
                                <el-input v-model="searchList.Name" :span="5"></el-input></el-form-item>
                        </el-col>
                        <el-col :span="9" >
                            <el-form-item label-width="75px" label="签约时间:">
                                <el-input v-model="searchList.SignTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-bottom: 20px">
                        <el-col :span="3" >
                            <el-checkbox label="有效"></el-checkbox>
                        </el-col>
                        <el-col :span="3">
                            <el-checkbox label="有效"></el-checkbox>
                        </el-col>
                        <el-col :span="3">
                            <el-checkbox label="有效"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label-width="60px" label="备注:">
                                <el-input :autosize="{ minRows: 1, maxRows: 4}" v-model="searchList.Remark" type="textarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" >
                        <el-col :span="6" >
                            <el-form-item label-width="60px" label="操作人:">
                                <el-input v-model="searchList.CreateUserName" :span="5"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9" >
                            <el-form-item label-width="75px" label="操作时间:">
                                <el-input v-model="searchList.CreateTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" >打印</el-button>
                    <el-button type="primary" >导出</el-button>
                    <el-button type="primary" @click="viewVisible = false" >取消</el-button>
                    <el-button type="primary">保存</el-button>
                  </span>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {
    fetchAllNurseSigns,
    DeleteSign, getNurseByCondition,
} from "../../../api/protocol";
import {quillEditor} from "vue-quill-editor";

const defaultList={
    OrganizationName:'',
    Status:'',
    OverTime:'',
    SignTime:'',
    TemplateName:'',
    CreateUserName:'',
    CreateTime:'',
    UserType:'',
    Name:'',
    JobNumber:''
}

export default {
    data(){
        return{
            list:[],
            defaultActive:'/protocolList',
            viewVisible: false,
            idx:-1,
            searchList1:Object.assign({},defaultList),
            searchList:Object.assign({},defaultList),
            editorOption: {
                placeholder: 'Hello World'
            }
        }
    },
    components: {
        quillEditor,
    },
    methods:{
        focus(event){
            event.enable(false);  //设置富文本编辑器不可编辑
        },
        handleDelete(index, row) {
          this.$confirm('是否要删除该签约协议?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'}).then(() => {
            this.idx = index;
            this.form = Object.assign({}, row)
            console.log(this.form)
            let para = {id: this.form.Id}
            DeleteSign(para).then(res=>{
                this.getAllNurseSigns()
            }).catch(err=>{
                console.log(err);
            })})
        },
        handleView(index, row) {
            this.idx = index;
            this.searchList = Object.assign({}, row)
            this.searchList.UserType = this.switchUserType(this.searchList.UserType)
            console.log(this.searchList)
            this.viewVisible = true;
        },
        switchStatus(status){
            switch (status) {
                case 1:
                    return '正常'
                case 2:
                    return '禁用'
            }
        },
        switchUserType(status){
            switch (status) {
                case 1:
                    return '护士协议'
                case 2:
                    return '患者协议'
            }
        },
        getAllNurseSigns(){
            fetchAllNurseSigns().then(res=>{
                this.list=res.Result
                for(let i=0;i<res.Result.length;i++){
                    this.list[i].Status = this.switchStatus(this.list[i].Status)
                }
                console.log('打印list：')
                console.log(this.list)
            })
        },
        getProtocol(){
            if(this.searchList1.Status=='')
                this.searchList1.Status='-1'
            let para={jsonStr:JSON.stringify(this.searchList1)}
            // console.log(JSON.stringify(this.searchList))
            getNurseByCondition(para).then(res=>{
                this.list=res.Result.data
                this.searchList.Status=''
                for(let i=0;i<this.list.length;i++){
                    this.list[i].Status = this.switchStatus(this.list[i].Status)
                }
            })
        },
        reset(){
            this.getAllNurseSigns()
        }
    },
    created() {

        this.getAllNurseSigns()
    }
}
</script>

<style scoped>
    .searchBox{
        border: 1px solid rgb(191, 203, 217);
    }
    .el-menu {
        background-color: #f0f0f0;
    }
    .el-menu-item {
        height: 40px;
        line-height: 40px;
    }
</style>